<template>
  <div class="box">
    <!-- <div class='tableBoxData_title'>入库备案申请表</div>
    <div style="text-align: center;">
      <iframe
        frameborder="0"
        name="showHere"
        width="70%"
        height="1000"
        scrolling="auto"
        :src="$https+tableInfo.filePath"
      ></iframe>
    </div>-->

    <div class="table" v-loading="isLoading">
      <h3 class="textAlign">{{tableInfo.xmmc}}</h3>
      <h3 class="textAlign">入库核查备案申请表</h3>
      <p class="textAlign littleTitle">{{tableInfo.district}}国土整备申[{{tableInfo.year}}]{{tableInfo.bah}}号;</p>
      <div class="table_content">
        <table class="table_table " border cellspacing="0" width="60%">
          <caption class="textRight">
            <el-button type="primary" size="small" plain @click="btnEdit">编辑</el-button>
            <el-button type="primary" size="small" plain @click="download">下载</el-button>
          </caption>

          <tr>
            <td class="tr" colspan="2">项目名称</td>
            <td colspan="5">{{tableInfo.xmmc}}</td>
          </tr>
          <tr>
            <td colspan="2">位置及四至范围</td>
            <td colspan="5">
              <el-input  v-model="submitInfo.place" class="table_tr_input" type="textarea" :rows="3" resize="none" :readonly="isReadOnly" placeholder="请输入内容"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">建设规模（公顷）</td>
            <td colspan="5">{{tableInfo.jsgm}}</td>
          </tr>
          
          <tr>
            <td colspan="2">主要建设内容</td>
            <td colspan="5">
              <el-input type="textarea" :rows="3" class="table_tr_input" resize="none" :readonly="isReadOnly" placeholder="请输入内容" v-model="submitInfo.mainContent"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">新增耕地面积(公顷)及新增耕地率(%)</td>
            <td colspan="5">{{tableInfo.xzgdl}}</td>
          </tr>
          <tr>
            <td colspan="2">建设工期</td>
            <td colspan="5">
              <!-- <el-date-picker v-model="submitInfo.startTime" type="date" placeholder="选择日期" :readonly="isReadOnly"></el-date-picker>
              -
              <el-date-picker v-model="submitInfo.endTime" type="date" placeholder="选择日期" :readonly="isReadOnly"></el-date-picker> -->
              <el-input :readonly="isReadOnly" class="table_tr_input" placeholder="请输入内容" v-model="submitInfo.jsgq"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">投资规模及投资结构(万元，%)</td>
            <td colspan="5">
              <el-input type="textarea" :rows="3" class="table_tr_input" resize="none" :readonly="isReadOnly" placeholder="请输入内容" v-model="submitInfo.tzgm"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">新增耕地亩均投资(万元)</td>
            <td colspan="5">{{tableInfo.xzgdmjtz}}</td>
          </tr>
          <tr>
            <td colspan="2">建设规模亩均投资(万元)</td>
            <td colspan="5">{{tableInfo.jsgmmjtz}}</td>
          </tr>
          <tr>
            <td colspan="2">资金来源</td>
            <td colspan="5">
              <el-input v-model="submitInfo.moneySources" class="table_tr_input" placeholder="请输入" :readonly="isReadOnly"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">法人代表</td>
            <td>
              <el-input v-model="submitInfo.farenDaibiao" class="table_tr_input" placeholder="请输入姓名" :readonly="isReadOnly"></el-input>
            </td>
            <td>联系电话</td>
            <td>
              <el-input v-model="submitInfo.tel" class="table_tr_input" placeholder="请输入联系电话" :readonly="isReadOnly"></el-input>
            </td>
            <td>手机</td>
            <td colspan="2">
              <el-input v-model="submitInfo.phone" class="table_tr_input" placeholder="请输入手机号码" :readonly="isReadOnly"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">通信地址</td>
            <td colspan="5">
              <el-input v-model="submitInfo.address" class="table_tr_input" placeholder="请输入地址" :readonly="isReadOnly"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">传真</td>
            <td>
              <el-input v-model="submitInfo.faxes" class="table_tr_input" placeholder="请输入" :readonly="isReadOnly"></el-input>
            </td>
            <td colspan="2">邮政编码</td>
            <td colspan="2">
              <el-input v-model="submitInfo.postCode" class="table_tr_input" placeholder="请输入邮政编码" :readonly="isReadOnly"></el-input>
            </td>
          </tr>
          <tr class="textLeft">
            <td colspan="3">
              <p>项目承担单位意见：</p>
              <div>
                {{tableInfo.xmcddwyj}}
              </div>
              <!-- <el-input type="textarea" :rows="3" resize="none" :readonly="isReadOnly" placeholder="请输入意见" v-model="submitInfo.uinteOpinion"></el-input> -->
            </td>
            <td colspan="4">
              <p>区县国土资源行政主管部门意见：</p>
              <div>
                {{tableInfo.qxxzbmyj}}
              </div>
              <!-- <el-input type="textarea" :rows="3" resize="none" :readonly="isReadOnly" placeholder="请输入意见" v-model="submitInfo.QuxianGtOpinion"></el-input> -->
            </td>
          </tr>
          <tr>
						<td colspan="2">
							区县中心审查时间
						</td>
						<td colspan="2">
							{{tableInfo.qxzxscsj}}
						</td>
						<td colspan="2">
							区县局审查时间
						</td>
						<td >
							{{tableInfo.qxjscsj}}
						</td>
					</tr>
          <tr class="textRight" v-if="!isReadOnly">
              <td colspan="7">
                <el-button type="primary" size="small" plain @click="btnSubmit">提交</el-button>
              </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { getTable,queryProjectStoringRecordTable,storingApplicationEdit } from "@/api/storageForRecordInfo";
export default {
  data() {
    return {
      tableInfo: "",

      isFlag: false,
      isReadOnly:true,//文本是否可编辑
      

      submitInfo:{
        place:'',//位置及四至范围
        mainContent:'',//主要建设内容
       // startTime:'',//建设工期
        //endTime:'',
        jsgq:'',//建设工期
        tzgm:'',//投资规模及投资结构(万元，%)
        moneySources:'',//资金来源
        farenDaibiao:'',//法人代表
        tel:'',//联系电话
        phone:'',//手机
        address:'',//通信地址
        faxes:'',//传真
        postCode:'',//邮政编码
        uinteOpinion:'',//项目承担单位意见
        QuxianGtOpinion:'',//区县国土资源行政主管部门意见
      },
      isLoading:false
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    btnSubmit(){
      let obj={
        projectId:localStorage.getItem("projectId"),
        wzjszfw:this.submitInfo.place,
        zyjsnr:this.submitInfo.mainContent,
        jsgq:this.submitInfo.jsgq,
        tzgmjtzjg:this.submitInfo.tzgm,
        zjly:this.submitInfo.moneySources,
        frdb:this.submitInfo.farenDaibiao,
        lxdh:this.submitInfo.tel,
        phone:this.submitInfo.phone,
        txdz:this.submitInfo.address,
        fax:this.submitInfo.faxes,
        yzbm:this.submitInfo.postCode,
        // txdz:this.submitInfo.address,
      }
      console.log(obj,'obj')
      this.isLoading=true
      storingApplicationEdit(obj).then(res=>{
        console.log(res,'bianji')
        if(res.code){
          this.getInfo()
          this.isReadOnly=true
          this.isLoading=false
        }
      }).catch(error=>{
       this.isLoading=false
      })
      
    },
    btnEdit(){//是否编辑
      this.isReadOnly=false
    },
    //下载入库备案表
    download(){
      var a=document.createElement("a");
      a.setAttribute("href",this.$https+"/pc/project/storing_record_first_audit_opinion/opinion_review?projectId="+localStorage.getItem("projectId"));
      a.click();
    },
    getInfo() {//入库备案申报查询
      let obj = {
        projectId: localStorage.getItem("projectId")
      };
      queryProjectStoringRecordTable(obj).then(res => {
        console.log(res, "12");
        if(res.data!=null){
            this.tableInfo = res.data;
            this.submitInfo={
              place:res.data.wzjszfw,//位置及四至范围
              mainContent:res.data.zyjsnr,//主要建设内容
              jsgq:res.data.jsgq,//建设工期
              tzgm:res.data.tzgmjtzjg,//投资规模及投资结构(万元，%)
               moneySources:res.data.zjly,//资金来源
              farenDaibiao:res.data.frdb,//法人代表
              tel:res.data.lxdh,//联系电话
              phone:res.data.phone,//手机
              address:res.data.txdz,//通信地址
              faxes:res.data.fax,//传真
              postCode:res.data.yzbm,//邮政编码
              //uinteOpinion:res.data.xmcddwyj,//项目承担单位意见
             // QuxianGtOpinion:res.data.qxxzbmyj,//区县国土资源行政主管部门意见
            }

        }
        
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.box {
  margin: 30px;
}
.tableBoxData_title {
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
  margin-bottom: 20px;
}

.textAlign {
  text-align: center;
}
.textLeft {
  text-align: left;
}
.littleTitle {
  font-size: 16px;
  color: #333;
}
.table_content {
  text-align: center;
}
.table_table {
  margin: auto;
  color: #333;
}
.tr {
  width: 20%;
}
.textRight {
  text-align: right;
  padding: 10px 20px;
}
.border {
  border: 0;
}
.table_table tr {
  border: 0;
}
.table_table tr td{
  padding: 10px;
}
.table_tr_input{
  min-width: 180px;
}
</style>